<!-- 预开票 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="900px"
    @close="resetForm"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
      <!-- 发票种类 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="发票种类" prop="preInvoiceCategory">
            <el-radio-group v-model="formData.preInvoiceCategory">
              <el-radio label="1">普票</el-radio>
              <el-radio label="2">专票</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 发票类型 -->
        <el-col :span="12">
          <el-form-item label="发票类型" prop="preInvoiceType">
            <el-radio-group v-model="formData.preInvoiceType">
              <el-radio label="1">企业</el-radio>
              <el-radio label="2">个人</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 发票抬头 & 单位统一信用代码 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="发票抬头" prop="preInvoiceTitle">
            <el-input
              v-model="formData.preInvoiceTitle"
              placeholder="请输入发票抬头"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位统一信用代码" prop="preCreditCode">
            <el-input
              v-model="formData.preCreditCode"
              placeholder="请输入单位统一信用代码"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 联系人 & 联系人电话 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人" prop="preContact">
            <el-input
              v-model="formData.preContact"
              placeholder="请输入联系人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="prePhone">
            <el-input
              v-model="formData.prePhone"
              placeholder="请输入联系人电话"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 开票时间 & 开票金额 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开票时间" prop="preIssueTime">
            <el-date-picker
              v-model="formData.preIssueTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开票时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票金额" prop="preInvoiceAmount">
            <el-input
              v-model.number="formData.preInvoiceAmount"
              placeholder="请输入开票金额"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 备注信息 -->
      <el-form-item label="备注信息" prop="preRemark">
        <el-input
          v-model="formData.preRemark"
          type="textarea"
          :rows="4"
          placeholder="请输入备注信息"
        />
      </el-form-item>

      <!-- 上传发票 -->
      <el-form-item label="上传发票">
        <file-upload
          ref="fileUpload"
          :value="formData.preInvoiceImage"
          :action="uploadAction"
          :file-type="['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx']"
          :file-size="10"
          :disabled="false"
          :is-show-tip="true"
          @input="handleFileInput"
          @upload-success="handleUploadSuccess"
        ></file-upload>
        <!-- <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          :file-list="fileList"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          accept=".jpg,.jpeg,.png,.gif,.pdf"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/jpeg/png/gif/pdf文件，且不超过10MB
          </div>
        </el-upload>
        <div v-if="formData.preInvoiceImage" class="upload-info">
          <span>{{ formData.preInvoiceImage.name }}</span>
          <span class="success">已选择</span>
          <span class="action">
            <a href="#" @click.prevent="handleDeleteFile">删除</a>
            <a
              v-if="isPreviewableFile(formData.preInvoiceImage)"
              href="#"
              @click.prevent="handlePreviewFile"
              >预览</a
            >
          </span>
        </div> -->
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FileUpload from "@/components/FileUpload/index.vue";

export default {
  name: "PreInvoiceForm",
  components: { FileUpload },
  props: {
    title: {
      type: String,
      default: "预开票信息",
    },
  },
  data() {
    return {
      uploadAction: "/file/upload",
      visible: false,
      fileList: [],
      formData: {
        preInvoiceCategory: "1",
        preInvoiceType: "1",
        preInvoiceTitle: "",
        preCreditCode: "",
        preContact: "",
        prePhone: "",
        preIssueTime: null,
        preInvoiceAmount: null,
        preRemark: "",
        preInvoiceImage: null,
        invoiceFileName: null, // 添加文件名字段
      },
      rules: {
        preInvoiceCategory: [
          { required: true, message: "请选择发票种类", trigger: "change" },
        ],
        preInvoiceType: [
          { required: true, message: "请选择发票类型", trigger: "change" },
        ],
        preInvoiceTitle: [
          { required: true, message: "请输入发票抬头", trigger: "blur" },
        ],
        preCreditCode: [
          {
            required: true,
            message: "请输入单位统一信用代码",
            trigger: "blur",
          },
        ],
        preContact: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        prePhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        preIssueTime: [
          { required: true, message: "请选择开票时间", trigger: "change" },
        ],
        preInvoiceAmount: [
          { required: true, message: "请输入开票金额", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleUploadSuccess(userIdx) {
      const user = this.fileData[userIdx];
      if (user) {
        this.$message.success(`用户【${user.name}】的文件上传成功`);
      }
    },
    handleFileInput(value) {
      // value 是上传成功后的文件URL
      this.formData.preInvoiceImage = value;
    },

    handleUploadSuccess(uploadedFile, response) {
      // uploadedFile 包含上传文件的信息
      // response 是服务器返回的响应
      this.$message.success("文件上传成功");
      // 如果需要保存文件名
      if (uploadedFile && uploadedFile.name) {
        this.formData.invoiceFileName = uploadedFile.name;
      }
    },
    // 修改提交表单方法
    submitForm() {
      console.log("验证前的数据", JSON.parse(JSON.stringify(this.formData)));
      this.$refs["form"].validate(async (valid) => {
        console.log("验证结果:", valid);
        if (valid) {
          // 构造提交数据
          const submitData = {
            ...this.formData,
          };

          console.log("验证后的数据", submitData);
          this.$emit("submit", submitData);
          this.visible = false;
        }
      });
    },

    open() {
      this.visible = true;
      this.resetForm();
    },
    resetForm() {
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
        this.formData.preInvoiceImage = null;
        this.fileList = [];
      });
    },
    submitForm() {
      console.log("验证前的数据", JSON.parse(JSON.stringify(this.formData)));
      this.$refs["form"].validate((valid) => {
        console.log("验证结果:", valid);
        if (valid) {
          // 在重置表单前先保存数据
          const submitData = JSON.parse(JSON.stringify(this.formData));
          console.log("验证后的数据", submitData);
          this.$emit("submit", submitData);
          this.visible = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.upload-info {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
}
.success {
  color: #4caf50;
  margin: 0 10px;
}
.action a {
  color: #409eff;
  margin-left: 10px;
  text-decoration: none;
}
.action a:hover {
  text-decoration: underline;
}
</style>